<template>
  <div class="navMenu">
    <div @click="handleClick(item)" class="cursor" :class="{activeBgc: checked === item}" v-for="(item,index) in options" :key="index">{{item}}</div>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'checked',
    event: 'click-change'
  },
  props: {
    checked: String,
    options: {
      type: Array,
      default () {
        return []
      }
    }
  },
  methods: {
    handleClick (val) {
      this.$emit('click-change', val)
    }
  }
}
</script>

<style lang='scss' scoped>
.navMenu {
  display: flex;
  > div {
    box-sizing: border-box;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
  }
  .activeBgc {
    background-image: linear-gradient(to right, #00CEFF, #00F6D1);
    color: #fff;
    border-radius: 10px;
  }
  .cursor {
    cursor: pointer;
  }
}
</style>
